<template>
    <el-button  text @click="Dialog()">
      选择兴趣技能
      </el-button
    >
    <el-dialog
      v-model="dialogVisible"
      title="stip"
      width="80%"
      destroy-on-close="true"
    >
    <el-row :gutter="10">
    <el-col :span="6"><el-input v-model="input" placeholder="搜索兴趣技能"/></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-button>搜索</el-button></el-col>
  </el-row>
  <div class="kong" @click="deleteitem($event,index)"><el-button v-for="(item,index) in kong">{{item}}</el-button></div>
  <el-row>
    <el-col :span="2">推荐兴趣技能</el-col>
    <el-col :span="6"></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple"/></el-col>
  </el-row>
  <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
    <div ref="innerRef">
      <p v-for="item in 1" :key="item" class="scrollbar-demo-item">
        <div class="dancetag" @click="light">
        <el-button :span="3" size="large" v-for="(item,index) in  DialogList" @click="add($event,item.name)">
          <svg v-if="item.pic" t="1666314549145" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2952" width="200" height="200">
                  <path
                    d="M874 150C674.1-50 349.9-50 150 150s-200 524.1 0 724 524.1 200 724 0 200-524.1 0-724z m-73.8 187.6L405.5 732.3s-0.1 0-0.1 0.1c0 0 0 0.1-0.1 0.1l-1 1c-12.2 12.2-32.1 12.2-44.3 0L223.3 596.7c-12.2-12.2-12.2-32.1 0-44.3l1-1c12.2-12.2 32.1-12.2 44.3 0l112.3 112.3L753.6 291c12.8-12.8 33.7-12.8 46.5 0 12.9 12.8 12.9 33.8 0.1 46.6z"
                    fill="#d4237a" p-id="2953">
                  </path>
                </svg>
          {{item.name}}</el-button>
    
        <!-- <el-button :span="3" size="large">Default</el-button>
        <el-button :span="3" size="large">Default</el-button>
        <el-button :span="3" size="large">Default</el-button>
        <el-button :span="3" size="large">Default</el-button>
        <el-button :span="3" size="large">Default</el-button>
        <el-button :span="3" size="large">Default</el-button>
        <el-button :span="3" size="large">Default</el-button> -->
      </div>
      </p>
    </div>
  </el-scrollbar>


      <template #header>
        <span class="dialog-Header">
          <em>选择我的兴趣技能</em>
          <span>0&nbsp;/&nbsp;7</span>
          <p>例如舞蹈就是选择舞种</p>
        </span>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="large" @click="dialogVisible = false">取消{{interesting}}</el-button>
          <el-button size="large" type="primary" style="background-color:#f93684" @click="dialogVisible = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { onMounted,ref , defineProps} from 'vue'
  import { ElScrollbar } from 'element-plus'
  import { ElMessageBox ,ElMessage} from 'element-plus'
  import {reqInterest} from '../../api/home'
  import useBannerstore from '../../store/home'
  // let interesting = ref(props.interesting)
  const bannerStore= useBannerstore()
  const input = ref('')
  const dialogVisible = ref(false)
  const DialogList = ref([])
  const kong = ref([])
  const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
  }
  // const light = (e:any) => {
  
  // }
//   const props = defineProps({
//   interesting: {}
// })
const Dialog = async () => {
  dialogVisible.value = true
  const result = await reqInterest()
  console.log(result)
   DialogList.value =result.content
   console.log(DialogList.value)
  //  result.avocation.forEach((item) => {
  //   item.pic = false
  // })
  //  console.log(DialogList.value)
  // result.data.content.forEach((item) => {
    // item.pic = false
  // })
  // DialogList.value = result.data.content
}

const add = (e,item)=>{
  // item.pic = !item.pic
  // let can = DialogList.value.filter((item) => {
  //   return item.pic == true
  // })
  // item.pic = false
  if(kong.value.length ===7){
    ElMessage({
      message: '最多添加7个兴趣功能',
      grouping: true,
      type: 'error',
    })
  return
}
 console.log(item)
//  item.pic = true
 kong.value.push(item)
 

}




// const delete =(e,item)=>{
// console.log(item)
// }

//   onMounted(()=>{
//   interesting = bannerStore.$state.interesting
//   console.log(interesting)
// })
const deleteitem = (e,index) =>{
  kong.value.splice(index,1)

}

  
  </script>
  <style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  /* .dancetag{
    display: flex;
    align-items: center;
    justify-content:space-between
  } */
/* 见鬼 */
  .Taps {
  width: 100%;
}

.Taps .tab {
  width: 1200px;
  position: relative;
  height: 80px;
  margin: auto;
  text-align: center;
  line-height: 80px;
}

.show {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f5f7f9;
}

.Taps a span {
  border-bottom: 3px solid #f5f7f9;
  padding: 20px 4px;
}

.Taps a .active {
  border-bottom: 3px solid #000;

}

.Taps a+a {
  margin-left: 40px;
}

.Taps a {
  padding: 12px 10px;
  text-decoration: none;
  font-size: 18px;
  color: #7d8090;
}

.Taps .right {
  position: absolute;
  right: 0px;
  height: 80px;
  vertical-align: top;
  padding: 0;
  color: #7d8090;
  font-size: 18px;
}

.Taps .icon {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 54px;
  height: 80px;
  color: #7d8090;
}

.qq {
  background-color: #e0e2ec;
}

.dialog-button:nth-last-child(1) {
  width: 130px;
  height: 40px;
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f93684;
  border-radius: 4px;
  border: none;
  margin-left: 10px;
}

/deep/.el-dialog__body .context {
  height: 200px;
  overflow: auto;
}

/deep/.el-dialog__body .context::-webkit-scrollbar {
  display: none
}

/deep/.el-button {
  min-width: 100px;
  width: 40px;
  margin: 0 22px 21px 0
}

.search .searchButton {
  width: 60px;
  height: 40px;
  /* border: 1px solid #E4E6EB; */
  background: #f3f6f8;
  border-radius: 4px;
  border: none;
  color: #A8AcA9;
}

.deleteButton {
  margin-top: 21px;

}

::v-deep .el-button {
  /* margin-top: 20px; */
  position: relative;
  background-color: #ffff;
  border-color: #dddfe5;
  ;
  color: #606266 !important;
}

.deleteButton .icon {
  width: 20px;
  position: absolute;
  top: -100px;
  left: 86px;

}

.context .icon {
  width: 20px;
  position: absolute;
  top: -99px;
  left: 87px;
  z-index: 99;
}

.dialog-button {
  width: 130px;
  height: 40px;
  border-radius: 4px;
  border: none;
  margin: 5px 10px;
}



::v-deep.el-dialog__body {
  margin-top: -67px !important;
}

/deep/ .el-button:hover {
  background-color: #ffff;
  border-color: #dddfe5;
  ;
  color: #606266 !important;
}
/deep/ .el-button--large:hover {
  background-color: #ffff;
  border-color: #dddfe5;
  ;
  color: #606266 !important;
}

.dialog-center {
  position: relative;
}

.dialog-center .search p {
  margin: -4px 0 10px;
  font-size: 14px;
  color: #111;
}

.el-input__inner {
  padding: 10px 20px;
  padding-left: 33px;
  background: #f5f7f9;
  border: 1px solid #eaecf0;
  height: 40px;
  line-height: 40px;
  width: 295px;
  margin-right: 20px;
}

.dialog-Header {
  width: 984px;
  height: 42px;
  padding: 20px 10px 10px;
}

.dialog-Header em {
  font-size: 18px;
  margin: 0 10px;
  /* color: #0000; */
}

.dialog-Header span {
  color: #b1b5c1;
  margin-left: 20px;
}

.dialog-Header p {
  margin: 0 20px;
  font-size: 14px;
  color: #b1b5c1;
  margin: 6px 20px;
}

.icon{
  width: 24px;
  height:20px;
  position:absolute;
  left: 85px;
  top: -13px;
}
  </style>